<template>
	<view class="login_box">
		<view class="text_login">
			<!-- logo -->
			<image class="login_logo"  src="../../static/logo/orange.png" alt="" />
			
			<!-- 表单区域 -->
			<view class="login_phone">
				<text>手机号</text>
				<input type="text"  maxlength="11" v-model="phone" />
			</view>
			<view class="login_code">
				<text>验证码</text> 
				<input type="text"  maxlength="4" v-model="newcode" />
				<view hover-class="touchOpacity" @click="getCode">{{ msg }}</view>
			</view>
			
			<!-- 登录按钮 -->
			<view class="login_but" hover-class="touchOpacity"  @click="dologin">
				<text space="ensp">登    录</text> 
			</view>
		</view>
	</view>
</template>

<script>
	var ison = true;  //  true 的时候，用户可以点击， false，用户不能点击
	export default {
		data() {
			return {
				phone:null,//输入的手机号
				msg:"获取验证码",
				newcode:null,
			}
		},
		methods: {
			// 2.执行登陆
			async dologin(){
				// 1.判断当前输入的验证码是否正确，同时是否已经过期
				let newcode = this.newcode; // 用户输入验证码
				let oldcode = uni.getStorageSync("code") || null; //原来获取到的验证码
				if(newcode == null ||  newcode != oldcode){
					this.$tips.showtoast('验证码错误或者已经过期')
					return;
				}
				// 手机号限制
				let  {phone,oldphone} =  this;//获取手机号
				if(phone != oldphone){
					this.$tips.showtoast('手机号不正确')
					return;
				}
				// 执行登陆
				var option = {
					url:"smslogin",
					data:{
						phone
					},
					method:"post"
				}
				let res=  await  this.$http(option);
				if(res.data.code ==200){
					// 登陆成功
					this.$tips.showtoast(res.data.msg); //  提示时间默认是1.5s
					// 将登陆之后的获取到的数据存入缓存
					uni.setStorageSync("userInfo",res.data.list);
					// 更新app.vue中取全局变量的值
					let  app =  getApp();
					let {avatarurl,nickname,phone,uid} = res.data.list
					app.globalData.userInfo = {avatarurl,nickname,phone,uid};
					app.globalData.loginStatus = true; //登录
					app.globalData.header.authorization = res.data.list.token;
					setTimeout(()=>{
						// 返回上一层级
						uni.switchTab({
							url:"../user/user"
						})
					},1500)
					
				}
				// console.log(res)
			},
			// 1.获取手机验证码
			async getCode(){
				if(!ison)return;
				//  api： sms，   参数：  phone
				let phone = this.phone;
				let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
				
				// if(!reg.test(phone)){
				// 	this.$tips.showtoast("请输入正确的手机号")
				// 	return;
				// }
				// 获取验证码
				var option = {
					url:"sms",
					data:{
						phone
					}
				}
				let res=  await  this.$http(option);
				console.log(res.data.list.code)
				if(res.data.code ==200){
					ison = false;//证明点击了按钮
					uni.setStorageSync("code",res.data.list.code)
					// 请求成功
					var num = 20;
					var timer =  setInterval(()=>{
						this.oldphone = phone; //原来的手机号
						num--;
						this.msg = num + "s之后,重新获取验证码"
						if(num < 1){
							clearInterval(timer);
							// 恢复变量状态
							this.msg = "获取验证码"
							ison= true;
							uni.removeStorageSync("code")
						}
					},1000)
					
				}else{
					this.$tips.showtoast('网络延迟')
				}
				
			}
		}
}
</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/textlogin.css");
</style>
